<template>
    <div class="content_box">
        <div class="content_left">
            <div class="content_left_title public_card">项目名称1111</div>
            <div class="content_left_ul public_card">
                <div class="header">
                    <img />
                    <div class="header_title">
                        <div>实例分割</div>
                        <div>轴对齐边界框</div>
                    </div>
                </div>
                <div class="split_box">
                    <div style="position: sticky;top: 0;background-color: #fff;z-index: 1;padding-top: 14px;">
                        <div class="split_title">模型训练</div>
                        <div @click="carterSplit" class="carter_split">创建模型</div>
                    </div>
                    <div v-for="(item, index) in splitData" :key="index" class="split_item">
                        <div class="split_item_title">
                            <div>{{ item.title }}</div>
                            <div class="split_item_actions">
                                <img @click="handleCommentClick(index, $event)" src="../static/images/split/comment.png"
                                    class="comment-img">
                                <img src="../static/images/split/more.png">
                                <div v-if="showPopconfirm === index" class="custom-popconfirm">
                                    <div class="popconfirm-arrow"></div>
                                    <div class="popconfirm-content">
                                        <div class="popconfirm-content-title">拆分评论</div>
                                        <textarea class="popconfirm-content-txt" placeholder="请输入" />
                                        <div class="popconfirm-content-btn">
                                            <div @click="closePopconfirm" class="popconfirm-content-btn-cancel">取消</div>
                                            <div @click="closePopconfirm" class="popconfirm-content-btn-submit">确定</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="split_item_content">
                            <div>compact（256*256）</div>
                            <div>新模型</div>
                            <div>未评估结果</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="content_right">
            <div class="content_right_left public_card">
                <div class="public_card_title">训练-250619-100454</div>
                <div v-for="(item, index) in staticData" :key="index" class="form_box">
                    <div class="form_box_label">{{ item.label }}：</div>
                    <div class="form_box_value">{{ item.value }}</div>
                </div>
                <div style="margin-top: 18px;" class="line"></div>
                <div class="public_card_title">拆分</div>
                <div class="content_right_top_left_s">
                    <div class="content_right_top_left_pie" ref="rightPieRef"></div>
                    <div class="content_right_table">
                        <div class="thead">
                            <div>数据集</div>
                            <div>实例</div>
                            <div>图像</div>
                        </div>
                        <div class="scroll_h">
                            <div v-for="item in 3" :key="item" class="tr">
                                <div>训练</div>
                                <div>2(100%)</div>
                                <div>9(100%)</div>
                            </div>
                        </div>
                        <div class="thead">
                            <div>拆分集中的总数</div>
                            <div>2</div>
                            <div>2</div>
                        </div>
                    </div>
                </div>
                <div style="margin-top: 12px;" class="line"></div>
                <div class="top_card_title">评估结果</div>
                <div class="top_card_subtitle">P1分数：-%</div>
                <div class="echarts_box">
                    <div class="echarts_box_item">
                        <div ref="pie"></div>
                        <div>精确率：-%</div>
                    </div>
                    <div class="echarts_box_item">
                        <div ref="pieTwo"></div>
                        <div>召回率：-%</div>
                    </div>
                </div>
                <div style="margin: 0 29px;" v-for="(item, index) in resultData" :key="index" class="form_box">
                    <div class="form_box_label">{{ item.label }}：</div>
                    <div class="form_box_value">{{ item.value }}</div>
                </div>
            </div>
            <div class="content_right_right">
                <div class="right_top public_card">
                    <div class="top_card_title">导出模型</div>
                    <div class="checkbox_box">
                        <el-checkbox v-model="isShow" checked />
                        <div class="label">针对推断进行优化</div>
                    </div>
                    <div class="export_btn">导出模型</div>
                </div>
                <div class="right_top public_card">
                    <div class="top_card_title">生成报告</div>
                    <div class="checkbox_box">
                        <el-checkbox v-model="isShow" checked />
                        <div class="label">在浏览器中显示生成的报告</div>
                    </div>
                    <div class="export_btn">生成报告</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import * as echarts from 'echarts'
import { ref, onMounted, onUnmounted, nextTick } from 'vue'

const rightPieRef = ref(null)
const pie = ref(null)
const pieTwo = ref(null)
const isShow = ref(false)

const staticData = ref([
    {
        label: '预训练模型',
        value: 'Compact'
    },
    {
        label: '图像尺寸',
        value: '156*156'
    },
    {
        label: '训练方式',
        value: '11th Gen Intel(R)core(TM)i7 - 11800H @2.30G..'
    },
    {
        label: '已训练的Epoch',
        value: '20'
    },
])

const resultData = ref([
    {
        label: '平均AP',
        value: '0%'
    },
    {
        label: '标签图像的总数',
        value: '0/0'
    },
])

const rightPieData = ref([
    { value: 80, name: '训练集', color: '#2165F8' },
    { value: 10, name: '验证集', color: '#FA8B14' },
])

// popconfirm状态管理 (-1表示不显示，>=0表示显示对应索引的popconfirm)
const showPopconfirm = ref(-1)
// 存储弹出框位置信息
const popconfirmPosition = ref({ top: 0, left: 0 })

// 示例数据
const splitData = ref([
    {
        title: '拆分-250702-123321',
        percentage: '69·15·15%',
        images: '13个图像(100%)',
        instances: '4个实例(100%)',
    },
    {
        title: '拆分-250702-456789',
        percentage: '80·10·10%',
        images: '20个图像(100%)',
        instances: '8个实例(100%)',
    },
    {
        title: '拆分-250702-456789',
        percentage: '80·10·10%',
        images: '20个图像(100%)',
        instances: '8个实例(100%)',
    },
    {
        title: '拆分-250702-456789',
        percentage: '80·10·10%',
        images: '20个图像(100%)',
        instances: '8个实例(100%)',
    },
    {
        title: '拆分-250702-456789',
        percentage: '80·10·10%',
        images: '20个图像(100%)',
        instances: '8个实例(100%)',
    }
])

onMounted(() => {
    nextTick(() => {
        initAllPies()
    })
    // 添加全局点击事件监听器
    document.addEventListener('click', handleClickOutside)

    // 添加滚动事件监听器，当列表滚动时关闭弹出框
    const splitBox = document.querySelector('.split_box')
    if (splitBox) {
        splitBox.addEventListener('scroll', closePopconfirm)
    }
})

onUnmounted(() => {
    // 清理全局点击事件监听器
    document.removeEventListener('click', handleClickOutside)

    // 清理滚动事件监听器
    const splitBox = document.querySelector('.split_box')
    if (splitBox) {
        splitBox.removeEventListener('scroll', closePopconfirm)
    }
})

// 初始化所有饼图
const initAllPies = () => {
    // 初始化右侧饼图
    if (rightPieRef.value) {
        initPie(rightPieRef.value, rightPieData.value)
    }
    if (pie.value) {
        initPie(pie.value, rightPieData.value)
    }
    if (pieTwo.value) {
        initPie(pieTwo.value, rightPieData.value)
    }
}

// 初始化单个饼图
const initPie = (element, data) => {
    // 如果已经存在图表实例，先销毁
    if (element._chartInstance) {
        element._chartInstance.dispose()
    }

    const myChart = echarts.init(element)
    // 将图表实例保存到DOM元素上，便于后续清理
    element._chartInstance = myChart

    const option = {
        series: [
            {
                type: 'pie',
                radius: ['48%', '100%'], // 环形饼图
                center: ['50%', '50%'],
                data: data.map(item => ({
                    value: item.value,
                    name: item.name,
                    itemStyle: {
                        color: item.color
                    }
                })),
                label: {
                    show: false // 隐藏标签
                },
                labelLine: {
                    show: false // 隐藏标签线
                },
                emphasis: {
                    scale: false // 禁用鼠标悬停放大效果
                }
            }
        ]
    }

    myChart.setOption(option)

    // 响应式调整
    const resizeHandler = () => {
        myChart.resize()
    }
    window.addEventListener('resize', resizeHandler)

    // 保存resize处理器，便于清理
    element._resizeHandler = resizeHandler
}

// 处理点击外部区域关闭popconfirm
const handleClickOutside = (event) => {
    const popconfirm = document.querySelector('.custom-popconfirm')
    const commentImgs = document.querySelectorAll('.comment-img')

    if (showPopconfirm.value >= 0 && popconfirm) {
        let clickedOnCommentImg = false
        commentImgs.forEach(img => {
            if (img.contains(event.target)) {
                clickedOnCommentImg = true
            }
        })

        if (!popconfirm.contains(event.target) && !clickedOnCommentImg) {
            closePopconfirm()
        }
    }
}

// 处理comment图片点击事件
const handleCommentClick = (index, event) => {
    // 切换弹出框显示状态
    showPopconfirm.value = showPopconfirm.value === index ? -1 : index

    // 如果是显示弹出框，则计算位置
    if (showPopconfirm.value === index) {
        // 获取点击位置
        const { clientX, clientY } = event
        // 获取页面滚动位置
        const scrollTop = document.documentElement.scrollTop || document.body.scrollTop
        const scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft

        // 设置弹出框位置（相对于文档）
        popconfirmPosition.value = {
            top: clientY + scrollTop + 10, // 向下偏移10px
            left: clientX + scrollLeft + 10 // 向右偏移10px
        }
    }
}

// 关闭popconfirm
const closePopconfirm = () => {
    showPopconfirm.value = -1
}

// 暴露常量给模板使用
const carterSplit = () => {

}
</script>

<style scoped lang="scss">
.content_box {
    height: calc(100% - 7px);
    padding: 7px 15px 0 15px;
    display: flex;

    .content_left {
        flex-shrink: 0;
        width: 235px;
        display: flex;
        flex-direction: column;
        margin-right: 11px;

        .content_left_title {
            padding: 0 15px;
            line-height: 50px;
            margin-bottom: 10px;
            font-size: 14px;
        }

        .content_left_ul {
            flex: 1;

            .header {
                display: flex;
                align-items: center;
                padding: 14px 15px;
                border-bottom: 1px solid rgba(117, 138, 179, 0.2);

                img {
                    margin-right: 10px;
                    width: 38px;
                    height: 35px;
                    border-radius: 50%;
                }

                .header_title {
                    div:nth-child(1) {
                        font-weight: 400;
                        font-size: 14px;
                        color: #333333;
                        line-height: 21px;
                        margin-bottom: 4px;
                    }

                    div:nth-child(2) {
                        font-weight: 400;
                        font-size: 12px;
                        color: #606266;
                        line-height: 18px;
                    }
                }
            }

            .split_box {
                padding: 0 15px 14px 15px;
                height: calc(100vh - 270px);
                overflow-y: auto;

                // 自定义滚动条样式
                &::-webkit-scrollbar {
                    width: 6px;
                }

                &::-webkit-scrollbar-track {
                    background: rgba(0, 0, 0, 0.1);
                    border-radius: 3px;
                }

                &::-webkit-scrollbar-thumb {
                    background: rgba(0, 0, 0, 0.3);
                    border-radius: 3px;

                    &:hover {
                        background: rgba(0, 0, 0, 0.5);
                    }
                }

                .split_title {
                    font-weight: 400;
                    font-size: 14px;
                    color: #222222;
                    line-height: 20px;
                }

                .carter_split {
                    cursor: pointer;
                    margin-top: 10px;
                    width: 100%;
                    border: 1px solid #2165F8;
                    border-radius: 22px;
                    font-weight: 500;
                    font-size: 14px;
                    color: #2165F8;
                    line-height: 40px;
                    text-align: center;
                }

                .split_item {
                    margin-top: 14px;
                    background: rgba(255, 255, 255, 0.79);
                    border-radius: 8px;
                    border: 1px solid #DCE5E6;
                    padding: 14px 10px 16px 14px;

                    .split_item_title {
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        margin-bottom: 12px;

                        div:nth-child(1) {
                            font-weight: 400;
                            font-size: 12px;
                            color: #333333;
                            line-height: 12px;
                        }

                        .split_item_actions {
                            position: relative;
                            display: flex;
                            align-items: center;

                            .comment-img {
                                cursor: pointer;
                                width: 12px;
                                height: 12px;
                                margin-right: 16px;
                            }

                            img:nth-child(2) {
                                cursor: pointer;
                                width: 12px;
                                height: 3px;
                            }

                            .custom-popconfirm {
                                position: fixed; // 改为fixed定位，相对于视口
                                top: v-bind('popconfirmPosition.top + "px"'); // 使用动态计算的位置
                                left: v-bind('popconfirmPosition.left + "px"'); // 使用动态计算的位置
                                background: rgba(0, 0, 0, 0.75);
                                border-radius: 6px;
                                z-index: 1000;

                                .popconfirm-arrow {
                                    position: absolute;
                                    left: -6px; // 在popconfirm左侧
                                    top: 10px; // 距离上边10px
                                    width: 0;
                                    height: 0;
                                    border-top: 6px solid transparent;
                                    border-bottom: 6px solid transparent;
                                    border-right: 6px solid rgba(0, 0, 0, 0.75); // 向左指向的三角箭头
                                }

                                .popconfirm-content {
                                    padding: 10px 21px 13px 19px;

                                    .popconfirm-content-title {
                                        font-weight: 400;
                                        font-size: 14px;
                                        color: #FFFFFF;
                                        line-height: 22px;
                                        margin-bottom: 8px;
                                    }

                                    .popconfirm-content-txt {
                                        width: 304px;
                                        height: 80px;
                                        padding: 8px 12px;
                                        background: #FFFFFF;
                                        border-radius: 6px;
                                        border: 1px solid rgba(255, 255, 255, 0.2);
                                        font-weight: 400;
                                        font-size: 14px;
                                    }

                                    .popconfirm-content-btn {
                                        display: flex;
                                        align-items: center;
                                        justify-content: end;
                                        gap: 15px;
                                        font-weight: 400;
                                        font-size: 14px;
                                        margin-top: 15px;

                                        &-cancel {
                                            background: #FFFFFF;
                                            border-radius: 4px;
                                            border: 1px solid rgba(0, 0, 0, 0.15);
                                            color: rgba(0, 0, 0, 0.88);
                                            line-height: 24px;
                                            padding: 0 8px;
                                            cursor: pointer;
                                        }

                                        &-submit {
                                            background: #1677FF;
                                            border-radius: 4px;
                                            border: 1px solid #1677FF;
                                            color: #FFFFFF;
                                            line-height: 24px;
                                            padding: 0 8px;
                                            cursor: pointer;
                                        }
                                    }
                                }
                            }
                        }
                    }

                    .split_item_content {
                        font-weight: 400;
                        font-size: 12px;
                        color: #606266;
                        line-height: 12px;

                        div:nth-child(1) {
                            margin-bottom: 18px;
                        }

                        div:nth-child(2) {
                            margin-bottom: 10px;
                        }

                        div:nth-child(3) {
                            margin-top: 18px;
                        }
                    }
                }
            }
        }
    }

    .content_right {
        flex: 1;
        margin-top: 10px;
        display: flex;
        gap: 10px;

        .content_right_left {
            flex: 1;

            .public_card_title {
                margin-top: 17px;
                margin-left: 14px;
                margin-bottom: 10px;
            }

            .form_box {
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding-left: 14px;
                padding-right: 15px;

                .form_box_label {
                    font-weight: 400;
                    font-size: 12px;
                    color: #606266;
                    line-height: 24px;
                }

                .form_box_value {
                    font-weight: 500;
                    font-size: 12px;
                    color: #333333;
                    line-height: 24px;
                }
            }

            .line {
                border: 1px solid rgba(117, 138, 179, 0.2);
            }

            .content_right_top_left_s {
                display: flex;
                flex-direction: column;
                align-items: center;
                margin-top: 13px;
                padding: 0 14px;

                .content_right_top_left_pie {
                    width: 140px;
                    height: 140px;
                }

                .content_right_table {
                    flex: 1;
                    width: 100%;
                    margin-top: 10px;

                    .thead {
                        display: flex;
                        align-items: center;
                        line-height: 20px;
                        background: rgba(0, 0, 0, 0.04);
                        border-radius: 6px;
                        text-align: center;
                        font-weight: 400;
                        font-size: 10px;
                        color: #606266;

                        div {
                            flex: 1;
                        }
                    }

                    .scroll_h {
                        height: 70px;
                        overflow-y: auto;
                        margin-bottom: 12px;

                        &::-webkit-scrollbar {
                            display: none;
                        }

                        scrollbar-width: none;
                        -ms-overflow-style: none;

                        .tr {
                            margin-top: 12px;
                            display: flex;
                            align-items: center;
                            text-align: center;
                            line-height: 12px;
                            font-weight: 500;
                            font-size: 12px;
                            color: #303133;

                            div {
                                flex: 1;
                            }
                        }
                    }
                }
            }

            .top_card_title {
                font-weight: 500;
                font-size: 14px;
                color: #303133;
                line-height: 14px;
                margin-left: 14px;
                margin-top: 12px;
            }

            .top_card_subtitle {
                font-weight: 400;
                font-size: 12px;
                color: #303133;
                line-height: 12px;
                text-align: center;
                margin-top: 10px;
            }

            .echarts_box {
                display: flex;
                align-items: center;
                padding: 0 45px;
                justify-content: space-between;
                margin-bottom: 10px;

                .echarts_box_item {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    gap: 6px;

                    div:first-child {
                        width: 100px;
                        height: 100px;
                    }

                    div:last-child {
                        font-weight: 400;
                        font-size: 12px;
                        color: #303133;
                        line-height: 12px;
                    }
                }

            }
        }

        .content_right_right {
            flex: 1;

            .right_top:nth-child(2) {
                margin-top: 10px;
            }

            .right_top {
                padding: 17px 0 21px 14px;

                .checkbox_box {
                    display: flex;
                    align-items: center;

                    .label {
                        margin-left: 10px;
                        font-weight: 400;
                        font-size: 12px;
                        color: #303133;
                        line-height: 12px;
                    }
                }

                .export_btn {
                    width: 205px;
                    text-align: center;
                    border: 1px solid #2165F8;
                    font-size: 14px;
                    color: #2165F8;
                    line-height: 40px;
                    border-radius: 22px;
                    cursor: pointer;
                }
            }
        }
    }
}
</style>